<template>
    <div class="apk-upload" :class="(modelValue || isOk) ? 'on' : ''">
        <el-upload :http-request="httpRequest" list-type="picture-card" v-model:file-list="fileList" class=""
            :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
    </div>

</template>
<script setup>
import { ref, inject } from 'vue'
import useUserStore from '@/store/modules/user'

import axios from 'axios'
const used = inject('used');
const userInfo = useUserStore();
let ossInfo = ref({});
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
})
const emit = defineEmits(['update:modelValue'])

//获取oss信息
const getOssInfo = async () => {
    ossInfo.value = await userInfo.getOssInfo();
    console.log(ossInfo.value, '------1');
}
getOssInfo();

let isOk = ref(false);
//列表
let fileList = ref([])
if (props.modelValue) {
    fileList.value = [{
        url: props.modelValue,
    }]
} else {
    fileList.value = []
}
//默认回显

//上传
const httpRequest = (options) => {
    const { file, onSuccess, onError, onProgress } = options;
    const formData = new FormData();
    formData.append('policy', ossInfo.value.policy);
    formData.append('x-oss-signature', ossInfo.value['signature']);
    formData.append('x-oss-signature-version', ossInfo.value['x_oss_signature_version']);
    formData.append('pox-oss-credentialicy', ossInfo.value['x_oss_credential']);
    formData.append('x-oss-date', ossInfo.value['x_oss_date']);
    formData.append('key', ossInfo.value['dir'] + options.file.name);
    formData.append('x-oss-security-token', ossInfo.value['security_token']);
    formData.append('x-oss-credential', ossInfo.value['x_oss_credential']);
    formData.append('file', file);
    isOk.value = true;
    // let params = {
    //     policy: ossInfo.value.policy,
    //     'x-oss-signature': ossInfo.value['signature'],
    //     'x-oss-signature-version': ossInfo.value['x_oss_signature_version'],
    //     'pox-oss-credentialicy': ossInfo.value['x_oss_credential'],
    //     'x-oss-date': ossInfo.value['x_oss_date'],
    //     'key': ossInfo.value['dir'] + options.file.name,
    //     'x-oss-security-token': ossInfo.value['security_token'],
    //     // 'x-oss-forbid-overwrite': '',//是否禁止覆盖oss文件 true禁止 不传参数为允许
    //     "x-oss-credential": ossInfo.value['x_oss_credential'],
    //     'file': formData,
    // }
    // console.log(options);
    // console.log(params);
    console.log(formData);
    console.log(ossInfo.value);
    axios.post(ossInfo.value.host, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        //进度
        onUploadProgress: (progressEvent) => {
            let progres = parseInt(progressEvent.loaded / progressEvent.total * 100)
            // console.log(progressEvent.loaded);
            // console.log(progressEvent.total);
            console.log(progres);
        },
    }).then((res) => {
        ///结果
        if (res.status == 204) {
            let url = 'https://download.yangtuoyou.com/' + ossInfo.value.dir + options.file.name;
            console.log(url);
            emit('update:modelValue', url)
            used.msgSuccess('上传成功')
            //成功
        } else {
            used.msgSuccess('上传失败')

            //失败
        }
        // https://download.yangtuoyou.com/apk/package/android/m/weixingjiejingditu.apk
    })
}
//删除
const handleRemove = (file, fileList) => {
    emit('update:modelValue', '')
    isOk.value = false;

}
//删除
const beforeRemove = (file, fileList) => {
    console.log(file, fileList);
}
</script>
<style lang="scss" scoped>
.apk-upload {
    &.on {
        :deep(.el-upload--picture-card) {
            display: none;
        }
    }
}
</style>